<template>
	<view>
		<view class="yc-popup-class" :class="[show ? 'yc-popup-show' : '',position ? `yc-${position}-popup` : 'yc-bottom-popup']" :style="{background:bgcolor}">
			<!-- <view class="pop-head" v-show="showHead">
				<text @tap="handleClose">取消</text>
				<text class="color-main title">{{headTitle}}</text>
				<text class="color-main-detail" @tap="handleSuccess">确定</text>
			</view> -->
		
			<slot></slot>
		</view>
		<view @touchmove.stop.prevent class="yc-popup-mask" :class="[show?'yc-mask-show':'']" v-if="mask" @tap="handleClose"></view>
	</view>
</template>

<script>
	export default {
		name: "yBottomPop",
		props: {
			//是否需要mask
			mask: {
				type: Boolean,
				default: true
			},
			showHead: {
				type: Boolean,
				default: false
			},
			headTitle: {
				type: String,
				default: ''
			},
			position:{ // 方位
				type: String,
				default: ''
			},
			//控制显示
			show: {
				type: Boolean,
				default: false
			},
			//背景颜色
			bgcolor: {
				type: String,
				default: "#fff"
			}
		},
		methods: {
			handleClose() {
				if (!this.show) {
					return;
				}
				this.$emit('close');
			},
			handleSuccess() {
				// this.handleClose()
				this.$emit('success',{})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.yc-popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 120;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}
	.yc-mask-show {
		opacity: 1;
		visibility: visible;
	}
	.yc-bottom-popup {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 121;
		visibility: hidden;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
		min-height: 20rpx;
		border-top: 1upx solid #ececec;
	}
	.yc-right-popup{
		@extend .yc-bottom-popup;
		left: auto;
		width: 620upx;
		height: 100vh;
		transform: translate3d(100%, 0, 0);
	}

	.yc-popup-show {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	.borderRadius{
		border-radius: 30upx 30upx 0 0;
	}

	.pop-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 32upx;
		color: #666666;
		height: 120upx;
		padding: 0 32upx;
	}
	.title{
		font-size: 32upx;
		font-family: AlibabaPuHuiTiM;
	}

	.color-main-detail {
		color: var(--mainColor);
	}
</style>
